@import 'scss-imports/cssvars';
@import 'mixins/cards';

:host {
  display: block;
}

.card {
  @include details-card();
}

.pool-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.pool-name {
  color: var(--fg2);
}

.pool-actions {
  button {
    margin-left: 6px;
  }
}

.cards {
  display: grid;
  gap: 8px;
  grid-template-columns: calc(50% - 4px) calc(50% - 4px);

  @media #{$media-lt-md} {
    grid-template-columns: auto;
  }

  @media #{$media-gt-lg} {
    grid-template-columns: calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px);
  }
}

.skeleton-content {
  .pool-header {
    ngx-skeleton-loader {
      display: inline-block;
      height: 40px;
      margin-bottom: 8px;
      width: 100%;
    }

    ::ng-deep .loader {
      height: 40px;
    }
  }

  .card {
    ngx-skeleton-loader {
      display: inline-block;
      height: 20px;
      margin: 8px 0;
      width: 100%;

      ::ng-deep .loader {
        margin: 0;
      }
    }
  }
}
